<template>
  <i id="Avatar">
    <el-popover
      placement="bottom-end"
      :width="180"
      trigger="hover"
    >
      <template #reference>
        <img 
          class="img"
          :title="userInfo.user"
          :src="`${baseURL}${userInfo.avatar}`"
        />
      </template>
      <!-- hover后显示的内容 -->
      <div
        class="user-btn"
        style="margin:0 auto; width:170px"
      >
        <el-button 
          plain 
          size="mini"
          @click="modifyUserInfoHandler"
        >
          修改信息
        </el-button>
        <el-button 
          type="info" 
          plain 
          size="mini"
          @click="logoutHandler"
        >
          退出登录
        </el-button>
      </div>      
    </el-popover>
  </i>
</template>

<script>
import { mapState, mapMutations } from "vuex"

export default {
  name: 'Avatar',
  computed:{
    ...mapState(['userInfo'])
  },
  methods:{
    ...mapMutations(['updateUserInfo']),

    // 退出登录
    async logoutHandler(){
      await this.$axios({
        method: 'post',
        url: '/login/logout'
      })
      
      // 清空vuex里的userInfo数据
      this.updateUserInfo({})
      // 跳转至主页
      this.$router.replace('/')
      // 提示成功
      this.$message.success('您已退出登录')
    },

    // 跳转到修改用户信息
    modifyUserInfoHandler(){
      this.$router.push('/userProfile')
    }
  }
}
</script>

<style lang="less" scoped>
  #Avatar{
    line-height: 66px;
    padding: 0 5px;
    cursor: pointer;
    .img{
      width: 50px;
      height: 50px;
      background-size: cover;
      background-position: center;
      border-radius: 50%;
      vertical-align: middle;      
    }
  }
</style>